<template>
   <div class="formItem">
        <div class="bottomBox">
        <div class="searchsize">
          <el-col  class="searchBox flex">
            <el-input
                class="w-10 m-2 mr-16 float-left"
                v-model="modeldata.searchValue.search"
                placeholder="请输入作业票编号"
                clearable
                maxlength="50"
            />
            <el-select
                    class="mr-16 float-left"
                    v-model="modeldata.searchValue.processState"
                    placeholder="请选择状态"
                    clearable
                    >
                      <el-option
                              v-for="item in modeldata.dropdown.processStateList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                              />
            </el-select>
            <el-button type="info" plain @click="reset">重置</el-button>
            <el-button type="primary" plain  @click="queryTableData"
            >查询</el-button>
          </el-col>
        </div>
        <div class="chartstyle">
          <el-table
              :data="modeldata.table.tableData"
              :header-cell-style="{ background: '#F2F5FA' }"
              border
              style="width: 100%"
          >
          <el-table-column prop="jobTypeStr" label="特殊作业类型" min-width="10%" />
            <el-table-column prop="postName"   label="岗位" min-width="10%" />
            <el-table-column prop="jobNo" label="作业编号" min-width="10%" />
            <el-table-column prop="state" label="作业票审批状态" min-width="10%" >
                <template #default="scope">
                    <el-tag v-if="scope.row.state == '0'" class="ml-2" type="primary">待审批</el-tag>
                    <el-tag v-if="scope.row.state == '1'" class="ml-2" type="primary">审批中</el-tag>
                    <el-tag v-if="scope.row.state == '2'" class="ml-2" type="danger">已驳回</el-tag>
                    <el-tag v-if="scope.row.state == '3'" class="ml-2" type="success">已通过</el-tag>
                    <el-tag v-if="scope.row.state == '4'" class="ml-2" type="danger">已拒绝</el-tag>
                    <el-tag v-if="scope.row.state == '5'" class="ml-2" type="primary">待处理</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="processState" label="作业过程审批状态" min-width="10%" >

                <template #default="scope">
                    <span v-if="scope.row.state == '3'">
                        <el-tag v-if="scope.row.processState == '0'" class="ml-2" type="primary">待审批</el-tag>
                        <el-tag v-if="scope.row.processState == '1'" class="ml-2" type="primary">审批中</el-tag>
                        <el-tag v-if="scope.row.processState == '2'" class="ml-2" type="danger">已驳回</el-tag>
                        <el-tag v-if="scope.row.processState == '3'" class="ml-2" type="success">已通过</el-tag>
                        <el-tag v-if="scope.row.processState == '4'" class="ml-2" type="danger">已拒绝</el-tag>
                        <el-tag v-if="scope.row.processState == '5'" class="ml-2" type="primary">待作业</el-tag>
                        <el-tag v-if="scope.row.processState == '6'" class="ml-2" type="danger">已中止</el-tag>
                    </span>
                    <span v-else>--</span>
                </template>
            </el-table-column>
          </el-table>
          <div class="demo-pagination-block mt-16 mb-16">
            <el-pagination
                :pageIndex="modeldata.table.pageIndex"
                :page-size="modeldata.table.pageSize"
                :page-sizes="[5, 10, 15, 20]"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="modeldata.table.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </div>
</template>
<script setup>
import { reactive, ref, markRaw, defineProps,onBeforeMount} from "vue";
import {  getJobTicketsPageByUser as getJobTicketsPageByUser}  from '@/api/secure.js'
let props = defineProps({
  userId: {
    type: String,
  },
});
let modeldata =  reactive({
  searchValue:{
    processState:'',
    search:'',
  },
  dropdown:{
   processStateList:[{
                      label: '审批中',
                      value: 1
                    },{
                      label: '待审批',
                      value: 0
                    },{
                      label: '已驳回',
                      value: 2
                    },{
                      label: '已通过',
                      value: 3
                    },{
                      label: '已拒绝',
                      value: 4
                    },{
                      label: '待处理',
                      value: 5
                    }],
  },
  table:{
    tableLoading: false,
    pageIndex: 1,
    pageSize: 10,
    total:0,
    tableData: [],
  }
})
const queryTableData = () => {
  modeldata.table.tableLoading = true;
  let obj = JSON.parse(JSON.stringify(modeldata.searchValue));
  obj.pageIndex = modeldata.table.pageIndex
  obj.pageSize = modeldata.table.pageSize
  obj.userId = props.userId
  getJobTicketsPageByUser(obj)
    .then((res)=>{
      modeldata.table.tableLoading = false;
      if(res.code === 200){
        console.log(res)
          let data = res.body;
          modeldata.table.tableData=data&&data?data.data:[];
          modeldata.table.total = data&&data.total?data.total:0;
        }else{
            ElNotification({
              title: '提示',
              message: res.message?res.message:'服务器异常',
              type: 'warning',
            })
            if(res.code === 100007 ||  res.code === 100008 ||  res.code === 100011){
                    store.dispatch('app/logout')
                }
        }
    })
    .catch(()=>{})
};
const reset = () => {
    modeldata.searchValue = {}
    queryTableData();
}
onBeforeMount(() => {
    queryTableData()
})
//切换一页显示多少条数据
const handleSizeChange = (val) => {
  modeldata.table.pageSize = val;
  queryTableData();
};
// 点击跳转到第几页
const handleCurrentChange = (val) => {
  modeldata.table.pageIndex = val;
  queryTableData();
};
</script>
<style lang="less" scoped>
 .formItem{
     padding: 0px 56px 16px !important;
 }
 .demo-pagination-block {
     float: right;
}
.searchBox{
    :deep(.el-input){
        width: 300px;
    }
}

</style>